<!--
 * @Author: your name
 * @Date: 2021-08-05 20:38:00
 * @LastEditTime: 2021-08-11 17:49:07
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \toutiao-me:\super-double-master\src\views\jfgs\index.vue
-->
<!--  -->
<template>
  <div class="company">
    <!-- :fixed="true" :placeholder="true" -->
    <!-- <van-nav-bar left-text="家政平台" /> -->
    <div class="Service-ss">
      <van-search
        v-model="value"
        background="#3f51b5"
        placeholder="智能匹配"
        shape="round"
      />
      <!-- <Dzxl class="dzxl" /> -->
      <XiaLa class="xiala" />
    </div>
    <div class="Service-sss">
      <span
        class="hot_item"
         :class="{active : active == obj.name}"
        v-for="(obj, index) in list"
        :key="index"
        @click="bn(obj.name)"
        >{{ obj.name }}</span>
      <!-- <!-- <span class="hot_item">123</span>
      <span class="hot_item">456</span>
      <span class="hot_item">789</span>
      <span class="hot_item">111</span>
      <span class="hot_item">222</span> -->
      <span class="hot_itemm">全部专业</span>
    </div>

    <Jfg
      class="jfg"
      v-for="obj in arr"
      :key="obj.id"
      :sss="obj.gs"
      :ssss="obj.pz"
      :sssss="obj.dz"
      :img="obj.image"
    />

    <!-- <van-image
        width="100"
        height="100"
        src="https://img0.baidu.com/it/u=1656101050,1480106336&fm=26&fmt=auto&gp=0.jpg"
      />

     <span class="span">湖南金管家政服务有限公司</span>
     <span class="sp"> 品质家政服务领导者 </span>
      <span class="hot_itemmm">协会成员</span>
      <span class="hot_itemmm">服务好</span>
      <span class="hot_itemmm">环境优美</span> -->

    <!-- <van-divider /> -->
  </div>
</template>

<script>
// 导入的其他文件 例如：import moduleName from 'modulePath';
import { getService } from '../../api/index'
import Jfg from '../../components/tabbar/jfgs.vue'
import XiaLa from '../../components/tabbar/jfgsdq.vue'
// 图片
import a from '../../assets/images/dog.jpg'
import b from '../../assets/images/g.jpg'
import c from '../../assets/images/m.jpeg'
import d from '../../assets/images/m1.jpg'
import e from '../../assets/images/gg.jpg'

export default {
  name: 'company',

  // import所引入的组件注册
  components: {
    Jfg,
    XiaLa
  },

  // 子组件进行数据接收
  props: {},

  data () {
    return {
      value: '',
      list: [],
      arr: [
        {
          id: 1,
          image: a,
          gs: '湖南金管家家政服务有限公司',
          pz: '您的笑容是我们的追求',
          dz: '啪啪啪啪啪啪铺铺铺'
        },
        {
          id: 2,
          image: b,
          gs: '长沙市家政服务有限公司',
          pz: '水电费是是的发送到的是的',
          dz: '急急急急急急军'
        },
        {
          id: 3,
          image: c,
          gs: '是是是服务有限公司',
          pz: '的说法是的范德萨发生',
          dz: '哈哈哈哈哈哈哈'
        },

        {
          id: 4,
          image: d,
          gs: '少时诵诗书所所所所',
          pz: '所发生的付所所所所',
          dz: '咕咕咕咕咕咕过过'
        },

        {
          id: 5,
          image: e,
          gs: '咕咕咕咕咕咕过过',
          pz: '哈哈哈哈哈哈',
          dz: '啊啊啊啊啊啊啊啊啊啊'
        }
      ],
      active: ''
    }
  },

  // 监听属性
  computed: {},

  // 监控data中的数据变化
  watch: {},

  // 方法集合
  methods: {
    bn (value) {
      this.value = value
      this.active = value
    }
  },

  // 生命周期 - 组件实例刚被创建
  beforeCreate () {},
  // 创建完成 访问当前this实例
  async created () {
    console.log(11)
    const { data } = await getService()
    console.log(data)
    this.list = data
  },
  // 挂载之前
  beforeMount () {},
  // 挂载完成 访问DOM元素
  mounted () {},
  // 更新之前
  beforeUpdate () {},
  // 更新之后
  updated () {},
  // for keep-alive 缓存功能，组件被激活时调用
  activated () {},
  // for keep-alive 组件被移除时调用
  deactivated () {},
  // 组件销毁之前调用
  beforeDestroy () {},
  // 组件销毁之后调用
  destroyed () {}
}
</script>
<style lang='less' scoped>
/* //@import url(); 引入公共css类 */
.Jfgs {
  background-color: #f8f8f8;
  height: 1500px;
  width: 100%;
}
/deep/ .van-nav-bar__content {
  background-color: #3f51b5;
  width: 100%;
}
/deep/ .van-nav-bar__text {
  color: #f8f8f8;
  font-size: 25px;
  font-weight: bold;
  width: 100%;
}
/* /deep/ .Service-ss {
  background-color: #3f51b5;
  width: 100%;
  height: 100px;
  margin: auto;
} */
/deep/ .van-search {
  width: 100%;
  /* width:110%; */
  /* padding: 10px 50px 30px 20px; */

  padding: 10px 150px 30px 20px;
}
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 35px;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 5px;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}
.hot_itemm {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 10px;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 5px;
  line-height: 0.853333rem;
  color: #3f51b5;
  border-color: #3f51b5;
  border-radius: 0.853333rem;
  border: 1px solid #3f51b5;
}
/deep/ .Service-sss {
  background-color: #ffffff;
  /* padding: 10px; */
  padding: 20px 0px 10px 30px;
  height: 200px;
  margin: auto;
  /* margin:0px 0px 30px 0px; */
  margin-top: 0px;
  margin-bottom: 30px;
  width:100%;

}
.van-hairline--bottom::after{
  border-bottom-width:0px ;
}
/* /deep/ .Service-sssss {
  position: relative;
  background-color: #ffffff;
  padding: 0.266667rem;
  padding: 20px;
  height: 270px;
  margin: auto;
   margin-top: 10px;
}  */

/* .dzxl {
  position: absolute;
  top: 110px;
  right: 20px;
} */
.jfg{
  width: 100%;

}
.xiala {
  position: absolute;
  top: 110px;
  right: 20px;
}
/deep/ .active {
  background:darkgray;
  border: 1px solid white;
  color: #fff;
 }

</style>
